import React from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { useUserStore } from './store/userStore'
import Login from './pages/Login'
import MainLayout from './layouts/MainLayout'
import Dashboard from './pages/Dashboard'
import TestPage from './pages/TestPage'
import SimpleTest from './pages/SimpleTest'
import './App.css'

// 权限路由组件
const PrivateRoute = ({ children }) => {
  const { isLoggedIn } = useUserStore()
  
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />
  }
  
  return children
}

// 公共路由组件
const PublicRoute = ({ children }) => {
  const { isLoggedIn } = useUserStore()
  
  if (!isLoggedIn) {
    return <Navigate to="/" replace />
  }
  
  return children
}

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          {/* 登录页面 */}
          <Route 
            path="/login" 
            element={
              <PublicRoute>
                <Login />
              </PublicRoute>
            } 
          />
          
          {/* 主应用路由 */}
          <Route 
            path="/" 
            element={
              <PrivateRoute>
                <MainLayout />
              </PrivateRoute>
            }
          >
            {/* 仪表盘 */}
            <Route index element={<Dashboard />} />
            <Route path="overview" element={<Dashboard />} />
            <Route path="analytics" element={<Dashboard />} />
            
            {/* 用户管理 */}
            <Route path="user-list" element={<div>用户列表页面</div>} />
            <Route path="user-profile" element={<div>用户档案页面</div>} />
            
            {/* 系统管理 */}
            <Route path="role" element={<div>角色管理页面</div>} />
            <Route path="permission" element={<div>权限管理页面</div>} />
            <Route path="menu" element={<div>菜单管理页面</div>} />
            
            {/* 内容管理 */}
            <Route path="article" element={<div>文章管理页面</div>} />
            <Route path="category" element={<div>分类管理页面</div>} />
            
            {/* 其他页面 */}
            <Route path="profile" element={<div>个人中心页面</div>} />
            <Route path="settings" element={<div>系统设置页面</div>} />
            
            {/* 测试页面 */}
            <Route path="test" element={<TestPage />} />
            <Route path="simple-test" element={<SimpleTest />} />
          </Route>
          
          {/* 404 页面 */}
          <Route path="*" element={<div>页面不存在</div>} />
        </Routes>
      </div>
    </Router>
  )
}

export default App
